<template>
  <div class="wrap">
    <div class="title">
      <div>我的訂單</div>
      <div></div>
      <div>訂單評論</div>
    </div>
    <div class="orderno">
      <div>
        <span>訂單號:{{list.orderSn}}</span>
        <span>下單時間:{{list.addTime}}</span>
      </div>
      <div>
        <img src="@/assets/xiaoyu.png" alt="">
        <span>返回</span>
      </div>
    </div>
    
    <div class="good_content">
      <!-- 商品非冷冻 -->
      <div v-if="fldgoods.length != 0">
        <div class="ldBox">非冷冻</div>
           <div class="gooditem" v-for="(item,index) in fldgoods" :key="index">
            <div>
              <img :src="item.picUrl" alt="">
              <div>{{item.goodsName}}</div>
            </div>
            <div>
              <div>
                <div>商品評分:</div>
                <div><el-rate v-model="item.star" :disabled='item.comment > 0 ?true:false'></el-rate></div>
              </div>
              <div>
                <div>商品評論:</div>
                <div><el-input style="width:100%" :disabled='item.comment > 0 ?true:false' class="textarea" type="textarea" :rows="5" placeholder="請填寫你的商品評論" v-model="item.content"></el-input></div>
              </div>
              <div class="public" @click="btn(item.id,item)" v-if="item.comment == 0">發表評論</div>
            </div>
          </div>
      </div>
      <!-- 商品冷冻 -->
      <div v-if="ldgoods.length != 0">
        <div class="ldBox">冷冻</div>
           <div class="gooditem" v-for="(item,index) in ldgoods" :key="index">
            <div>
              <img :src="item.picUrl" alt="">
              <div>{{item.goodsName}}</div>
            </div>
            <div>
              <div>
                <div>商品評分:</div>
                <div><el-rate v-model="item.star" :disabled='item.comment > 0 ?true:false'></el-rate></div>
              </div>
              <div>
                <div>商品評論:</div>
                <div><el-input style="width:100%" :disabled='item.comment > 0 ?true:false' class="textarea" type="textarea" :rows="5" placeholder="請填寫你的商品評論" v-model="item.content"></el-input></div>
              </div>
              <div class="public" @click="btn(item.id,item)" v-if="item.comment == 0">發表評論</div>
            </div>
          </div>
      </div>
    </div>
    

  </div>
</template>
<script>
import {del,comment} from '@/api/order';
import { getToken } from '@/utils/auth' 
export default {
  data(){
    return{
      ldgoods:[],
      fldgoods:[],
      list:{
        orderSn:'',
        addTime:''
      },
    }
  },
  mounted(){
    console.log(this.$route.query.id)
    var id = this.$route.query.id
    del({userId:getToken(),orderId:id}).then(response => {
        if (response.errno == 0) {
          this.list = response.data.orderInfo
          this.ldgoods=response.data.ldOrderGoods
          this.fldgoods = response.data.fldOrderGoods
        } else {
          this.$message({
              type: 'error',
              message: response.errmsg
          })
        }
      })
  },
  methods: {
    btn(e,item){
      comment({userId:getToken(),orderGoodsId:e,content:item.content,star:item.star}).then(response => {
        if(response.errno == 0){
          console.log(response)
          this.$message({
            type:'success',
            message: response.errmsg
          })
          this.$router.go(-1)
        }else{
          this.$message({
            type:'errno',
            message: response.errmsg
          })
        }
      })
    }
  }
}
</script>
<style scoped>
  .wrap{
    width: 100%;
    /* height: 1358px; */
    /* background: #FFFFFF; */
    background: #f5f5f5;
    box-sizing: border-box;
    padding: 15px;
  }
  .title{
    width: 100%;
    box-sizing: border-box;
    padding: 10px 20px 20px 20px;
    border-bottom: 1px solid #F5F5F5;
    display: flex;
    align-items: center;
    margin-bottom: 10px;
    margin-top: -15px;
    background: white;
  }
  .title>div:nth-child(1){
    font-size: 19px;
    font-weight: bold;
    color: #333333;
    border-bottom: 3px solid #333333;
  }
  .title>div:nth-child(2){
    width: 8px;
    height: 2px;
    background: #333333;
    margin: 0px 10px;
  }
  .title>div:nth-child(3){
    font-size: 19px;
    font-weight: bold;
    color: #333333;
    border-bottom: 3px solid #333333;
  }
  .orderno{
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-sizing: border-box;
  }
  .orderno>div:nth-child(1){
    font-size: 20px;
    font-weight: 400;
    color: #333333;
    line-height: 24px;
    margin-bottom: 10px;
  }
  .orderno>div:nth-child(1)>span:nth-child(1){
    margin-right: 10px;
  }
  .orderno>div:nth-child(2){
    font-size: 14px;
    font-weight: 400;
    color: #656565;
  }
  .orderno>div:nth-child(2)>img{
    width: 6px;
    height: 9px;
  }
  .good_content{
    width: 100%;
    box-sizing: border-box;
    background: white;
    padding: 40px;
  }
  .gooditem{
    width: 100%;
    display: flex;
    /* justify-content: space-between; */
    box-sizing: border-box;
  }
  .gooditem>div:nth-child(1){
    width: 30%;
    margin-right: 20px;
  }
  .gooditem>div:nth-child(1)>img{
    width: 111px;
    height: 111px;
    object-fit:contain;
  }
  .gooditem>div:nth-child(1)>div{
    font-size: 20px;
    font-weight: 400;
    color: #656565;
    line-height: 24px;
  }
  .gooditem>div:nth-child(2){
    width: 60%;
  }
  .gooditem>div:nth-child(2)>div{
    display: flex;
    margin-bottom: 10px;
    /* align-items: center; */
  }
  .gooditem>div:nth-child(2)>div>div:nth-child(1){
    font-size: 14px;
    font-weight: 400;
    color: #333333;
    margin-right: 10px;
  }
  .gooditem>div:nth-child(2)>div>div:nth-child(2){
    width: 80%;
  }
  .public{
    width: 90px;
    height: 32px;
    background: linear-gradient(-90deg, #FFA907, #FFC515);
    border-radius: 4px;
    font-size: 14px;
    font-weight: 400;
    color: #FFFFFF;
    line-height: 32px;
    text-align: center;
    display: flex;
    justify-content: center;
    cursor: pointer;
    margin-top: 30px;
  }
  .ldBox{
    font-size: 20px;
    font-weight: 500;
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 1px solid  rgba(206, 206, 206, 0.35);
  }
</style>